<template>
  <el-container>
    <el-header style="border-bottom: 2px solid #dee2e7">
      <h2 style="color: #50b4ff">既往史</h2>
    </el-header>
    <el-main style="padding: 0;height:100%">
      <div class="row-div">
        <div class="left-div">
          <span>个人史</span>
          <el-checkbox v-model="tempOpen.pastHistory.personal.ifNull">无</el-checkbox>
        </div>
        <div class="right-div" style="display:flex">
          <el-checkbox-group :disabled="tempOpen.pastHistory.personal.ifNull" v-model="tempOpen.pastHistory.personal.data">
            <el-checkbox label="吸烟"></el-checkbox>
            <el-checkbox label="酗酒"></el-checkbox>
            <el-checkbox label="熬夜"></el-checkbox>
            <el-checkbox label="吸毒"></el-checkbox>
            <el-checkbox label="精神创伤"></el-checkbox>
            <el-checkbox label="接触有害物质"></el-checkbox>
          </el-checkbox-group>
          <el-button :disabled="tempOpen.pastHistory.personal.ifNull" @click="dialogVisible = true" icon="el-icon-arrow-down" style="padding:0;position:absolute;right: 20px;">更多</el-button>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>家庭史</span>
          <el-checkbox v-model="tempOpen.pastHistory.family.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <el-row v-for="(e, i) in tempOpen.pastHistory.family.data" :key="i">
            <el-select filterable :disabled="tempOpen.pastHistory.family.ifNull" v-model="e.disease" size="small" placeholder="疾病名称">
              <el-option v-for="(e, i) in dict.simple.DTMHI130020" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select>
            <el-select filterable :disabled="tempOpen.pastHistory.family.ifNull" v-model="e.sibship" size="small" placeholder="亲人关系">
              <el-option v-for="(e, i) in dict.simple.DTMHI130010" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select>
            <el-input style="width:200px" @focus="showKeyboard" @blur="hiddenKeyboard" :disabled="tempOpen.pastHistory.family.ifNull" v-model="e.age" size="small" placeholder="发病年龄">
              <template slot="append">岁</template>
            </el-input>
            <!-- <el-select :disabled="tempOpen.pastHistory.family.ifNull" v-model="e.age" size="small" placeholder="发病年龄">
              <el-option v-for="(e, i) in dict.simple.DTMHI130030" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select> -->
            <el-button :disabled="tempOpen.pastHistory.family.ifNull" @click="remove(tempOpen.pastHistory.family, i)" icon="el-icon-minus" size="small"></el-button>
          </el-row>
          <el-row>
            <el-button :disabled="tempOpen.pastHistory.family.ifNull" @click="add(tempOpen.pastHistory.family)" icon="el-icon-plus" size="small"></el-button>
          </el-row>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>手术史</span>
        </div>
        <div class="right-div">
          <span>1.手术名称+ID   浙江省第一人民医院 2014-11-16</span>
          <el-button icon="el-icon-arrow-down" style="padding:0;position:absolute;right: 20px;">更多</el-button>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>过敏史</span>
          <el-checkbox v-model="tempOpen.pastHistory.allergic.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <el-row v-for="(e, i) in tempOpen.pastHistory.allergic.data" :key="i">
            <el-select filterable :disabled="tempOpen.pastHistory.allergic.ifNull" v-model="e.source" size="small" placeholder="过敏原">
              <el-option v-for="(e, i) in dict.simple.DTMHI100010" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              <!-- <el-option value="阿司匹林">阿司匹林</el-option> -->
            </el-select>
            <el-select filterable :disabled="tempOpen.pastHistory.allergic.ifNull" v-model="e.reaction" size="small" placeholder="过敏反应">
              <el-option v-for="(e, i) in dict.simple.DTMHI100020" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select>
            <el-select :disabled="tempOpen.pastHistory.allergic.ifNull" v-model="e.level" size="small" placeholder="过敏程度">
              <el-option v-for="(e, i) in dict.simple.DTMHI100030" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select>
            <el-button :disabled="tempOpen.pastHistory.allergic.ifNull" @click="remove(tempOpen.pastHistory.allergic, i)" icon="el-icon-minus" size="small"></el-button>
          </el-row>
          <el-row>
            <el-button :disabled="tempOpen.pastHistory.allergic.ifNull" @click="add(tempOpen.pastHistory.allergic)" icon="el-icon-plus" size="small"></el-button>
          </el-row>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>月经史</span>
          <el-checkbox v-model="tempOpen.pastHistory.menstrual.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <div>
            <el-form :inline="true">
              <el-form-item label="初潮年龄">
                <el-input :disabled="tempOpen.pastHistory.menstrual.ifNull" v-model="tempOpen.pastHistory.menstrual.firstAge" @focus="showKeyboard" @blur="hiddenKeyboard" size="small"></el-input>
              </el-form-item>
              <el-form-item label="月经周期">
                <el-input :disabled="tempOpen.pastHistory.menstrual.ifNull" v-model="tempOpen.pastHistory.menstrual.cycle" @focus="showKeyboard" @blur="hiddenKeyboard" size="small"></el-input>
              </el-form-item>
              <el-form-item label="行经天数">
                <el-input :disabled="tempOpen.pastHistory.menstrual.ifNull" v-model="tempOpen.pastHistory.menstrual.duration" @focus="showKeyboard" @blur="hiddenKeyboard" size="small"></el-input>
              </el-form-item>
              <el-form-item label="末次月经日期">
                <el-date-picker value-format="yyyy-MM-dd" :disabled="tempOpen.pastHistory.menstrual.ifNull" v-model="tempOpen.pastHistory.menstrual.lastDate" size="small" type="date" placeholder="末次月经日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="闭经日期">
                <el-date-picker value-format="yyyy-MM-dd" :disabled="tempOpen.pastHistory.menstrual.ifNull" v-model="tempOpen.pastHistory.menstrual.endDate" size="small" type="date" placeholder="闭经日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="绝经年龄">
                <el-input :disabled="tempOpen.pastHistory.menstrual.ifNull" v-model="tempOpen.pastHistory.menstrual.endAge" @focus="showKeyboard" @blur="hiddenKeyboard" size="small" placeholder="绝经年龄"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>慢性病史</span>
          <el-checkbox v-model="tempOpen.pastHistory.chronic.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <el-row v-for="(e, i) in tempOpen.pastHistory.chronic.data" :key="i"> 
            <el-select filterable :disabled="tempOpen.pastHistory.chronic.ifNull" v-model="e.disease" size="small" placeholder="疾病名称">
              <el-option v-for="(e, i) in dict.simple.DTMHI195020" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select>
            <el-input class="duration" size="small" @focus="showKeyboard" @blur="hiddenKeyboard" :disabled="tempOpen.pastHistory.chronic.ifNull" placeholder="持续时间" v-model="e.duration">
              <el-select v-model="e.durationUnit" slot="append" placeholder="时间单位" style="width:100px">
                <el-option v-for="(e, i) in dict.simple.DTMHI195030" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              </el-select>
            </el-input>
            <el-select :disabled="tempOpen.pastHistory.chronic.ifNull" v-model="e.level" size="small" placeholder="程度">
              <el-option v-for="(e, i) in dict.simple.DTMHI195040" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
            </el-select>
            <el-button :disabled="tempOpen.pastHistory.chronic.ifNull" @click="remove(tempOpen.pastHistory.chronic, i)" icon="el-icon-minus" size="small"></el-button>
          </el-row>
          <el-row>
            <el-button :disabled="tempOpen.pastHistory.chronic.ifNull" @click="add(tempOpen.pastHistory.chronic)" icon="el-icon-plus" size="small"></el-button>
          </el-row>
        </div>
      </div>
      <keyboard ref="k1" :targetEvent="targetEvent" @stopHidden="stopHidden" />
    </el-main>
  </el-container>
</template>

<script>
import keyboard from "@/components/Keyboard"
import { mapGetters } from 'vuex'

  export default {
    name: 'PastHistory',
    components: {
      keyboard
    },
    data() {
      return {
        keyboardVal: null,
        keyboardIndex: null,
        clickFlag: null,
        targetEvent: null,
      }
    },
    methods: {
      showKeyboard(event) {
        let rect = event.target.getBoundingClientRect()
        if (this.targetEvent) {
          let _rect = this.targetEvent.target.getBoundingClientRect()
          if (rect.x == _rect.x && rect.y == _rect.y) {
            this.$refs.k1.$el.style.visibility = 'visible'
            return
          }
        }
        this.targetEvent = event
        this.$refs.k1.$el.style.top = (rect.y - 20) + 'px'
        this.$refs.k1.$el.style.left = rect.x + 'px'
        this.$refs.k1.$el.style.visibility = 'visible'
      },
      hiddenKeyboard(event) {
        // setTimeout(() => {
        //   console.log(this.clickFlag)
        //   if (this.clickFlag == null) {
        //     return
        //   } else if (!this.clickFlag) {
        //     this.$refs.k1.$el.style.visibility = 'hidden'
        //   } else {
        //     event.target.focus()
        //     this.clickFlag = false
        //   }
        // }, 400)
      },
      stopHidden() {
        // console.log('stop')
        this.clickFlag = true
      },
      chooseItem(item) {
        this.$set(item, 'chosen', !item.chosen);
      },
      remove(arr, index) {
        arr.data.splice(index ,1)
      },
      add(arr) {
        arr.data.push({})
      }
    },
    computed: {
      ...mapGetters([
        'tempOpen',
        'dict',
        'dictIndex'
      ])
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .duration {
    width: 200px;
    .el-input-group__append {
      padding: 0 0 0 15px;
      // input {
      //   width: 100px;
      // }
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .left-div {
    width: 15%;
    background-color: #fafafc;
    padding: 10px;
    .el-checkbox {
      float: right;
    }
  }
  .right-div {
    width: 85%;
    padding: 10px;
    position: relative;
  }
  .row-div {
    display: flex;
    border-bottom: 1px solid #d8dde2;
  }
  .card-div {
    padding: 0 5px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    * {
      margin-right: 10px;
    }
  }
  .align-right {
    text-align: right;
  }
</style>
<style  rel="stylesheet/scss" lang="scss">
  .record-history-dialog {
    .el-dialog__body {
      padding: 0px 0px;
    }
  }
</style>